<template>
  <div style="padding: 24px 0;">
    <router-link style="margin-left: 24px;" :to="{path:'/substitute/substituteApply'}"><a-button>调代课申请</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteApproval'}"><a-button>调代课审批</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteStatistics'}"><a-button>调代课统计</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteTeacherStatistics'}"><a-button>调代课统计（管理员）</a-button></router-link>
    <router-link :to="{path:'/substitute/substituteSetting'}"><a-button>基础设置</a-button></router-link>
    <a-button @click="applyDetailsDialog = true">申请调课详情</a-button>
    <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="我的调代课">
          <div class="body">
            <div class="adjust-class">
              <div class="adjust-class-top">
                <div
                  v-for="(item,index) in timeList" :key="index"
                  :class="[timeChange == index? 'select-time' : 'no-select-time']"
                  @click="timeSelect(index)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="search-row">
                <div class="search-input">
                  <a-input-search v-model="queryList.substituteTeacherName" class="search-desc" placeholder="请输入老师姓名" enter-button/>
                </div>
                <a-button>导出数据</a-button>
              </div>
            </div>
            <div class="card">
              <div @click="selectSubstituteType(index)"  v-for="(item,index) in 3" :key="index" class="class-card" :style="{'width' : '33%'}">
                <div class="class-card-circle">
                  <a-icon class="class-card-icon" type="swap" />
                </div>
                <div class="class-card-title">
                  <div v-if="index == 0" class="class-card-tit">调课（节）</div>
                  <div v-if="index == 1" class="class-card-tit">代课（节）</div>
                  <div v-if="index == 2" class="class-card-tit">自修（节）</div>
                  <div v-if="index == 0" class="class-card-num">{{ applyStatistics.transferClasses }}</div>
                  <div v-if="index == 1" class="class-card-num">{{ applyStatistics.substituteClasses }}</div>
                  <div v-if="index == 2" class="class-card-num">{{ applyStatistics.selfClasses }}</div>
                </div>
              </div>
            </div>
            <a-table :columns="applyColumns" :data-source="applyClass">
              <span slot="createTime" slot-scope="scope, record">
                <!-- <div>{{ scope.courseDate.split(' ')[0] + '·' + scope.courseWeek }}</div> -->
                <div>{{ record.createTime.split(' ')[0] + ' ' }} {{ new Map([
                  [1, '周一'],
                  [2, '周二'],
                  [3, '周三'],
                  [4, '周四'],
                  [6, '周五️'],
                  [7, '周六️'],
                  [8, '周日️'],
                ]).get(record.courseWeek) }}{{ '第' + record.courseWeek + '节' }}</div>
              </span>
              <span slot="courseName" slot-scope="scope, record">
                <div>{{ record.courseClassName + '·' + record.courseName }}</div>
              </span>
              <span slot="leaveApplyId" slot-scope="scope, record">
                <div v-if="leaveApplyId">教师请假</div>
                <div v-else>申请调代课</div>
              </span>

              <span slot="substituteType" slot-scope="scope, record">
                <div v-if="record.substituteType == 0">代课</div>
                <div v-if="record.substituteType == 1">调课</div>
                <div v-if="record.substituteType == 2">调课（自修）</div>
              </span>
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="老师调代课">
          <div class="body">
            <div class="adjust-class">
              <div class="adjust-class-top">
                <div
                  v-for="(item,index) in timeList" :key="index"
                  :class="[timeChange == index? 'select-time' : 'no-select-time']"
                  @click="timeSelect(index)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="search-row">
                <div class="search-input">
                  <a-input-search v-model="queryList.substituteTeacherName" class="search-desc" placeholder="请输入老师姓名" enter-button/>
                </div>
                <a-button>导出数据</a-button>
              </div>
            </div>
            <div class="card">
              <div @click="selectSubstituteType(index)"  v-for="(item,index) in 3" :key="index" class="class-card" :style="{'width' : '33%'}">
                <div class="class-card-circle">
                  <a-icon class="class-card-icon" type="swap" />
                </div>
                <div class="class-card-title">
                  <div v-if="index == 0" class="class-card-tit">调课（节）</div>
                  <div v-if="index == 1" class="class-card-tit">代课（节）</div>
                  <div v-if="index == 2" class="class-card-tit">自修（节）</div>
                  <div v-if="index == 0" class="class-card-num">{{ applyStatistics.transferClasses }}</div>
                  <div v-if="index == 1" class="class-card-num">{{ applyStatistics.substituteClasses }}</div>
                  <div v-if="index == 2" class="class-card-num">{{ applyStatistics.selfClasses }}</div>
                </div>
              </div>
            </div>
            <a-table :columns="applyDetailsColumns" :data-source="applyStatistics">
              <span slot="applyTransferClasses" class="text-num" @click="toDeatil(record.teacherId,1,record.teacherName)" slot-scope="scope, record">{{ scope }}</span>
              <span slot="applySubstituteClasses" class="text-num" @click="toDeatil(record.teacherId,2,record.teacherName)" slot-scope="scope, record">{{ scope }}</span>
              <span slot="transferClasses" class="text-num" @click="toDeatil(record.teacherId,3,record.teacherName)" slot-scope="scope, record">{{ scope }}</span>
              <span slot="substituteClasses" class="text-num" @click="toDeatil(record.teacherId,4,record.teacherName)" slot-scope="scope, record">{{ scope }}</span>
              <span slot="selfClasses" class="text-num" @click="toDeatil(record.teacherId,5,record.teacherName)" slot-scope="scope, record">{{ scope }}</span>
            </a-table>
          </div>
        </a-tab-pane>
      </a-tabs>
    <a-modal v-model="applyDetailsDialog" :title="applyDetailsTitle" :footer="null" width="1000px">
      <div class="apply-details">
        <div class="apply-details-tit">调代课老师：</div>
        <div class="apply-details-desc">{{ teacherName || '' }}</div>
        <div class="apply-details-tit">调代课节数：</div>
        <div class="apply-details-desc">{{ classlength || 0 }}节</div>
      </div>
      <a-table :columns="detailColumns" :data-source="detailList">
        <span slot="queryType" slot-scope="scope, record">
          <div class="desc-top">{{ record.courseClassName + '·' +  record.courseName }}</div>
          <div class="desc-bottom">{{ record.courseDate.split(' ')[0] + ' ' }}{{ week.get(record.courseWeek) }}{{'第' + record.courseIndex + '节'}}</div>
        </span>
        <span slot="queryTwoType" slot-scope="scope, record">
          <div class="desc-top">{{ record.substituteCourseClassName + '·' +  record.substituteCourseName }}</div>
          <div class="desc-bottom">{{ record.substituteCourseDate.split(' ')[0] + ' ' }}{{ week.get(record.substituteCourseWeek) }}{{'第' + record.substituteCourseIndex + '节'}}</div>
        </span>
        <span slot="leaveApplyId" slot-scope="scope, record">
          <div v-if="leaveApplyId">申请调代课</div>
          <div v-else>教师请假</div>
        </span>
        <span slot="substituteReason" slot-scope="scope, record">
          <div>{{ scope || '暂无' }}</div>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>
<style scoped="scoped" lang="scss">
  .attendance-tit {
    font-size: 16px;
    color: #333333;
    margin: 24px 0 24px 24px;
  }

  .body {
    padding: 14px 24px 24px 24px;
    .adjust-class {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 30px 0;
        .adjust-class-top {
          display: flex;
          align-items: center;
          .select-time {
            font-size: 14px;
            font-weight: 400;
            color: #4174FD;
            margin-right: 40px;
            cursor: pointer;
          }
          .no-select-time {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            margin-right: 40px;
            cursor: pointer;
          }
        }
      }
    .search-row {
      display: flex;
      align-items: center;
      .search-input {
        display: flex;
        align-items: center;
        .search-tit {
          font-size: 14px;
          color: #333333;
        }
        .search-desc {
          width: 200px;
          margin-right: 20px;
        }
      }
    }
    .card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      .class-card {
        height: 103px;
        background: #FFFFFF;
        border-radius: 12px;
        border: 1px solid #F2F4FA;
        display: flex;
        justify-content: center;
        align-items: center;
        .class-card-circle {
          width: 55px;
          height: 55px;
          background: linear-gradient(141deg, #76ACFF 0%, #4174FD 100%);
          border-radius: 28px;
          display: flex;
          justify-content: center;
          align-items: center;
          .class-card-icon {
            font-size: 25px;
            background-color: #FFFFFF;
            color: #76ACFF;
            border-radius: 2px;
          }
        }
        .class-card-title {
          text-align: left;
          margin-left: 32px;
          .class-card-tit {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          .class-card-num {
            margin-top: 2px;
            font-size: 24px;
            background: #FFFFFF;
            border-radius: 12px;
          }
        }
      }
    }
    .text-num {
      font-size: 14px;
      font-weight: 400;
      color: #4174FD;
      cursor: pointer;
    }
  }
  .apply-details {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .apply-details-tit {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
    }
    .apply-details-desc {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      margin-right: 90px;
    }
  }
  .desc-top {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .desc-bottom {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
  }
</style>
<script>
  const applyColumns = [
    {
      title: '序号',
      customRender: (text,record,index) => `${index+1}`,
    },
    {
      title: '调代课时间',
      dataIndex: 'createTime',
      scopedSlots: { customRender: 'createTime' },
    },
    {
      title: '课程',
      dataIndex: 'courseName',
      scopedSlots: { customRender: 'courseName' },
    },
    {
      title: '调代课来源',
      dataIndex: 'leaveApplyId',
      scopedSlots: { customRender: 'leaveApplyId' },
    },
    {
      title: '类型',
      dataIndex: 'substituteType',
      scopedSlots: { customRender: 'substituteType' },
    },
    {
      title: '对调课程',
      dataIndex: 'substituteCourseName',
    },
    {
      title: '任课老师',
      dataIndex: 'substituteTeacherName',
    },
    {
      title: '原因',
      dataIndex: 'substituteReason',
    },
  ];
  const applyDetailsColumns = [
    {
      title: '老师姓名',
      dataIndex: 'teacherName',
      // scopedSlots: { customRender: 'tdkjs' },
    },
    {
      title: '申请调课',
      dataIndex: 'applyTransferClasses',
      scopedSlots: { customRender: 'applyTransferClasses' },
    },
    {
      title: '申请代课',
      dataIndex: 'applySubstituteClasses',
      scopedSlots: { customRender: 'applySubstituteClasses' },
    },
    {
      title: '被调课',
      dataIndex: 'transferClasses',
      scopedSlots: { customRender: 'transferClasses' },
    },
    {
      title: '代课',
      dataIndex: 'substituteClasses',
      scopedSlots: { customRender: 'substituteClasses' },
    },
    {
      title: '自修',
      dataIndex: 'selfClasses',
      scopedSlots: { customRender: 'selfClasses' },
    },
  ]
  import {
    getApplyStatisticsPage,
    substituteStatisticsClasses,
    getApprovePage,
    substituteTeacherStatisticsPage,
    substituteTeacherStatisticsCoursePage,
    substituteApprovePage} from '@/api/apply'
  export default {
    data() {
      return {
        applyColumns,
        applyClass: [],
        detailColumns: [],
        applyDetailsColumns,
        timeList: ['全部','今日','本周','本月','本学期','自定义时间'],
        timeChange: 0,
        applyDetailsDialog: false,
        applyStatistics: [],
        queryList: {
          substituteType: 1,
          queryTeacherId: undefined,
          queryStartDate: '2000-01-01',
          queryEndDate: undefined,
          queryType: undefined,
          teacherId: undefined
        },
        substituteStatisticsClassesData: {},
        applyDetailsTitle: '',
        detailList: [],
        week: new Map([
          [1,'周一'],
          [2,'周二'],
          [3,'周三'],
          [4,'周四'],
          [5,'周五'],
          [6,'周六'],
          [7,'周日'],
        ]),
        classlength: 0,
        teacherName: '',
      }
    },
    created() {
      let date = new Date();
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
      this.queryList.queryEndDate = Y + M + D
      this.getList()
    },

    methods: {
      getList() {

        //我审批的（管理员）
        substituteApprovePage(this.queryList).then(response => {
          this.applyClass = response.data.records
        })
        .catch((err) => {

        })


        substituteTeacherStatisticsPage(this.queryList).then(response => {
          this.applyStatistics = response.data.records
        })
        .catch((err) => {

        })
      },
      getApprovePage() {
        getApprovePage().then(response => {
          this.applyStatistics = response.data.records
        })
        .catch((err) => {

        })
      },
      selectSubstituteType(index) {
        this.fristSelect = false
        if (index == 0) this.queryList.substituteType = 0
        if (index == 1) this.queryList.substituteType = 1
        if (index == 2) this.queryList.substituteType = 2
        this.getList()
      },
      timeSelect(index) {
        this.timeChange = index
      },
      toDeatil(id,type,teacherName) {
        this.queryList.teacherId = id
        this.queryList.queryType = type
        this.teacherName = teacherName
        let queryType = new Map([
          [1,'申请调课'],
          [2,'申请代课'],
          [3,'被调课'],
          [4,'代课'],
          [5,'自修']
        ])
        let queryTwoType = new Map([
          [1,'申请被调课'],
          [2,'代课老师'],
          [3,'申请调课'],
          [4,'被代课老师'],
          [5,'申请调课']
        ])
        this.applyDetailsTitle = (type==1 || type == 2)? queryType.get(type) + '详情' : '申请' + queryType.get(type) + '详情'
        this.detailColumns = [
          {
            title: queryType.get(type),
            dataIndex: 'queryType',
            scopedSlots: { customRender: 'queryType' },
          },
          {
            title: queryTwoType.get(type),
            dataIndex: 'queryTwoType',
            scopedSlots: { customRender: 'queryTwoType' },
          },
          {
            title: '来源',
            dataIndex: 'leaveApplyId',
            scopedSlots: { customRender: 'leaveApplyId' },
          },
          {
            title: '原因',
            dataIndex: 'substituteReason',
            scopedSlots: { customRender: 'substituteReason' },
          },
        ]
        this.applyDetailsDialog = true
        substituteTeacherStatisticsCoursePage(this.queryList).then(response => {
          this.detailList = response.data.records
          this.classlength = response.data.records.length
        })
        .catch((err) => {

        })
      }
    },
  }
</script>
